import React, {Component} from 'react';
import Logo from "../../component/logo/logo";
import {
    Button,
    WingBlank,
    WhiteSpace,
    List,
    InputItem
} from 'antd-mobile';
import {Redirect} from 'react-router-dom';
import {connect} from 'react-redux';
import {login} from '../../redux/user.redux';

@connect(
    state => state.user,
    {login}
)
export default class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            userPhone: "",
            userPassword: ""
        };
        this.skipRegister = this.skipRegister.bind(this);
        this.forgetPassword = this.forgetPassword.bind(this);
        this.loginClick = this.loginClick.bind(this);
    }

    render() {
        return (
            <div>
                {this.props.redirectTo ? <Redirect to={this.props.redirectTo}/> : null}
                <Logo/>
                <h1 align="center">登录页</h1>
                <WingBlank size="xl">
                    <List>
                        {this.props.msg ? <p align="center" className="redText">{this.props.msg}</p> : null}
                        <InputItem onChange={(v) => this.handleChange("userPhone", v)}>手机号</InputItem>
                        <InputItem onChange={(v) => this.handleChange("userPassword", v)}>密码</InputItem>
                    </List>
                    <WhiteSpace/>
                    <Button type="primary" onClick={this.loginClick}>登录</Button>
                    <WhiteSpace/>
                    <p align="center" className="blueText" onClick={this.skipRegister}>前往注册</p>
                    <p align="center" className="blueText" onClick={this.forgetPassword}>忘记密码</p>
                </WingBlank>
            </div>
        )
    }

    //前往注册
    skipRegister() {
        this.props.history.push('/register');
    }

    //忘记密码
    forgetPassword() {

    }

    //获取input值
    handleChange(key, val) {
        this.setState({
            [key]: val
        });
    }

    //点击登录按钮
    loginClick() {
        console.log(this.state);
        this.props.login(this.state);
    }
}